<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">

    <title>我的购物车</title>


    <link rel="stylesheet" type="text/css" href="/static/home/css/pages-cart.css" />

    <script type="text/javascript" src="/static/home/js/pages/index.js"></script>
</head>

<body>


    <!--主内容-->
    <div class="cart py-container">
        <!--All goods-->
        <div class="allgoods">
            <h4>全部商品<span>11</span></h4>
            <div class="cart-main">
                <div class="yui3-g cart-th">
                    <div class="yui3-u-1-4"><input type="checkbox" name="" id="" value="" /> 全部</div>
                    <div class="yui3-u-1-4">商品</div>
                    <div class="yui3-u-1-8">单价（元）</div>
                    <div class="yui3-u-1-8">数量</div>
                    <div class="yui3-u-1-8">小计（元）</div>
                    <div class="yui3-u-1-8">操作</div>
                </div>
                <div class="cart-item-list">
                    <div class="cart-shop">
                        <input type="checkbox" name="" id="" value="" />
                        <span class="shopname self">传智自营</span>
                    </div>
                    <div class="cart-body">
                        {foreach $cartlist as $v}
                        <div class="cart-list">
                            <ul class="goods-list yui3-g" cart_id="{$v.id}" number="{$v.number}">
                                <li class="yui3-u-1-24">
                                    <input type="checkbox" class="row_check" name="" id="" value="" {if($v.is_selected)} checked {else} {/if} />
                                </li>
                                <li class="yui3-u-6-24">
                                    <div class="good-item">
                                        <div class="item-img"><img src="{$v.goods_logo}" /></div>
                                        <div class="item-msg">{$v.goods_name}</div>
                                    </div>
                                </li>
                                <li class="yui3-u-5-24">
                                    <div class="item-txt">{$v.value_names}</div>
                                </li>
                                <li class="yui3-u-1-8"><span class="price">{$v.price}</span></li>
                                <li class="yui3-u-1-8">
                                    <a href="javascript:void(0)" class="increment mins">-</a>
                                    <input autocomplete="off" type="text" value="{$v.number}" minnum="1" class="itxt current_number" />
                                    <a href="javascript:void(0)" class="increment plus">+</a>
                                </li>
                                <li class="yui3-u-1-8"><span class="sum">{$v.price*$v.number}</span></li>
                                <li class="yui3-u-1-8">
                                    <a href="#none" class="delete">删除</a><br />
                                    <a href="#none">移到我的关注</a>
                                </li>
                            </ul>
                        </div>
                        {/foreach}
                    </div>
                </div>
            </div>
            <div class="cart-tool">
                <div class="select-all">
                    <input type="checkbox" class="check_all" name="" value="" />
                    <span>全选</span>
                </div>
                <div class="option">
                    <a href="#none">删除选中的商品</a>
                    <a href="#none">移到我的关注</a>
                    <a href="#none">清除下柜商品</a>
                </div>
                <div class="money-box">
                    <div class="chosed">已选择<span id="total_number">0</span>件商品</div>
                    <div class="sumprice">
                        <span><em>总价（不含运费） ：</em><i id="total_price" class="summoney">¥0</i></span>
                        <span><em>已节省：</em><i>-¥0</i></span>
                    </div>
                    <div class="sumbtn">
                        <a class="sum-btn" href="javascript::">结算</a>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="deled">
                <span>已删除商品，您可以重新购买或加关注：</span>
                <div class="cart-list del">
                    <ul class="goods-list yui3-g">
                        <li class="yui3-u-1-2">
                            <div class="good-item">
                                <div class="item-msg">Apple Macbook Air 13.3英寸笔记本电脑 银色（Corei5）处理器/8GB内存</div>
                            </div>
                        </li>
                        <li class="yui3-u-1-6"><span class="price">8848.00</span></li>
                        <li class="yui3-u-1-6">
                            <span class="number">1</span>
                        </li>
                        <li class="yui3-u-1-8">
                            <a href="#none">重新购买</a>
                            <a href="#none">移到我的关注</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="liked">
                <ul class="sui-nav nav-tabs">
                    <li class="active">
                        <a href="#index" data-toggle="tab">猜你喜欢</a>
                    </li>
                    <li>
                        <a href="#profile" data-toggle="tab">特惠换购</a>
                    </li>
                </ul>
                <div class="clearfix"></div>
                <div class="tab-content">
                    <div id="index" class="tab-pane active">
                        <div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
                            <div class="carousel-inner">
                                <div class="active item">
                                    <ul>
                                        <li>
                                            <img src="/static/home/img/like1.png" />
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
														class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <img src="/static/home/img/like2.png" />
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
														class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <img src="/static/home/img/like3.png" />
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
														class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <img src="/static/home/img/like4.png" />
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
														class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="item">
                                    <ul>
                                        <li>
                                            <img src="/static/home/img/like1.png" />
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
														class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <img src="/static/home/img/like2.png" />
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
														class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <img src="/static/home/img/like3.png" />
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
														class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <img src="/static/home/img/like4.png" />
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
														class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
                            <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
                        </div>
                    </div>
                    <div id="profile" class="tab-pane">
                        <p>特惠选购</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
<script>
    //全选效果
    $(function() {
        $('.check_all').change(function() {
                //获取全选的选中状态
                var status = $(this).prop('checked');
                //将每一行的checkbox的状态和全选保持一致
                $('.row_check').prop('checked', status)
                change_total()

            })
            //每一行checkbox选中
        $('.row_check').change(function() {
            check()
            change_total()
        })
        check()
        change_total()

        function check() {
            var status = $('.row_check:checked').length == $('.row_check ').length;
            $('.check_all').prop('checked', status);
        }

        //计算已选商品的数量和金额
        function change_total() {
            //获取所有选中行
            var total_number = 0;
            var total_price = 0;
            $('.row_check:checked').each(function(i, v) {
                    // console.log({//$v});
                    total_number += parseInt($(v).closest('ul').find('.current_number').val());
                    total_price += parseInt($(v).closest('ul').find('.sum').html());
                })
                // console.log(total_number);
                // console.log(total_price);
                //循环 取到每一个选中行
            $('#total_number').html(total_number + '件商品');
            $('#total_price').html('￥' + total_price);
        }

        //加号减号修改数量
        $('.plus').click(function() {
            var number = parseInt($(this).closest('ul').find('.current_number').val());
            number += 1;

            // var price = parseInt($(this).closest('ul').find('.price').html());
            // // console.log(price);
            // total_price = parseInt($(this).closest('ul').find('.sum').html(number * price));
            // // console.log(total_price);

            // $(this).closest('ul').find('.current_number').val(number);

            changeNum(number, this)

            // change_total()
        })
        $('.mins').click(function() {
                var number = parseInt($(this).closest('ul').find('.current_number').val());
                if (number == 1) {
                    return
                }
                number -= 1;

                // var price = parseInt($(this).closest('ul').find('.price').html());
                // // console.log(price);
                // total_price = parseInt($(this).closest('ul').find('.sum').html(number * price));
                // // console.log(total_price);

                // $(this).closest('ul').find('.current_number').val(number);

                changeNum(number, this)

                // change_total()
            })
            //给input绑定 change事件
        $('.current_number').change(function() {
                var number = $(this).val();

                // var price = parseInt($(this).closest('ul').find('.price').html());
                // // console.log(price);
                // total_price = parseInt($(this).closest('ul').find('.sum').html(number * price));
                // // console.log(total_price);

                //检测输入的值是否是数字
                if (isNaN(number)) {
                    alert('宝贝！请输入整数');
                    var oldnum = $(this).closest('ul').attr('number');
                    $(this).val(oldnum);
                    return;
                }
                //检测输入的值是否是整数
                if (parseInt(number) != number || number <= 1) {
                    alert('宝贝！购买数量为正整数');
                    var oldnum = $(this).closest('ul').attr('number');
                    $(this).val(oldnum);
                    return;
                }
                changeNum(number, this);
            })
            //删除购物车数据
        $('.delete').click(function() {
                var id = $(this).closest('ul').attr('cart_id');
                var data = {
                    'id': id,
                }
                var that = this;
                $.ajax({
                    'url': "{:url('home/cart/deleteCart')}",
                    'type': "post",
                    'data': data,
                    'dataType': 'json',
                    'success': function(res) {
                        // console.log(res);
                        //将当前行从页面移除
                        $(that).closest('.cart-list').remove();
                        //重新计算商品的数量和金额
                        change_total()
                    }
                })
            })
            //跳转结算页面
        $('.sum-btn').click(function() {
            //判断是否选中状态
            if ($('.row_check:checked').length == 0) {
                alert('请选择结算商品');
                return;
            }
            //跳转结算页面
            location.href = "{:url('home/order/orderCart')}";
        })

        //发送ajax请求
        function changeNum(number, element) {
            var id = $(element).closest('ul').attr('cart_id');
            var data = {
                'id': id,
                'number': number
            }
            $.ajax({
                'url': "{:url('home/cart/changeNum')}",
                'type': "post",
                'data': data,
                'dataType': 'json',
                'success': function(res) {
                    // console.log(res);
                    $(element).closest('ul').find('.current_number').val(number);
                    var price = parseInt($(element).closest('ul').find('.price').html());
                    // console.log(price);
                    total_price = parseInt($(element).closest('ul').find('.sum').html(number * price));
                    // console.log(total_price);
                    change_total()

                }
            })
        }
    })
</script>